<template>
  <v3-waterfall :list="images" :colWidth="280" :isLoading="isLoading" :virtual-time="400" :isOver="false"
     class="waterfall" :animation="true">
    <template v-slot:default="slotProp">
      <div class="list-item">
        <div class="cover-wrapper">
          <el-image :src="getFilePath(slotProp.item.src)" @click="handleImageClick(slotProp.item.src)" >
          </el-image>
          <div class="button-container">
            <el-button class="action-button" :icon="CopyDocument" @click="handleCopy(slotProp.item.src)"/>
            <el-popconfirm class="action-button" title="确认删除?" @confirm="handleDelete(slotProp.item.src)">
              <template #reference>
                <el-button type="success" :icon="Delete" circle/>
              </template>
            </el-popconfirm>
          </div>
        </div>
      </div>
    </template>
  </v3-waterfall>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { imageList, imageDelete } from '@/api/admin/image.js'
import { getFilePath } from '../../utils/enviroment';
import {
  Delete,
  CopyDocument
} from '@element-plus/icons-vue'
const images = ref([])
const isMounted = ref(false)
const isLoading = ref(true)

import useClipboard from 'vue-clipboard3'
import { ElMessage } from 'element-plus'


onMounted(() => {
  isMounted.value = true
  getImageList()
})

function getImageList() {
  imageList().then(res => {
    images.value = res.data;
    isLoading.value = false
  })
}

const handleCopy = (src) => {
  const { toClipboard } = useClipboard()
  try {
    toClipboard(getFilePath(src))
    ElMessage('复制成功')
  } catch (e) {
    ElMessage({
      message: '复制失败',
      type: 'error'
    })
  }
};

const handleDelete = (src) => {
  isLoading.value = true
  imageDelete(src).then(res => {
    getImageList()
  })
};

const handleImageClick = (src) => {
  // 图片点击事件处理逻辑
};


</script>
<style scoped>
.list-item {
  position: relative;
}

.cover-wrapper {
  position: relative;
}

.cover {
  display: block;
  width: 100%;
  height: auto;
}

.button-container {
  position: absolute;
  top: 10px;
  left: 10px;
  display: none;
}

.cover-wrapper:hover .button-container {
  display: block;
}

.action-button {
  margin-left: 5px;
}
</style>
